<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body a {
            text-decoration: none;
            color: #0d3a4b;
        }

        .active {
            color: #ffffff;
        }

        .wrap {
            width: 700px;
            height: 500px;
            background-color: skyblue;
            margin: 0 auto;
            position: relative;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 160px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody td {
            background: #fff;
            text-align: center;
        }

        .ctrl {
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .ctrl div {
            width: 300px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        h1 {
            text-align: center;
            padding-top: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h1>员工列表</h1>
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;" class="bt1">年龄从小到大</a>
                <a href="javascript:;" class="bt2">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;" class="bt3">只显示男性</a>
                <a href="javascript:;" class="bt4">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>0</td>
                    <td>小明</td>
                    <td>24</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var data = [
            {
                id: 1,
                name: '小明',
                age: 24,
                gender: '男'
            },
            {
                id: 2,
                name: '小芳',
                age: 30,
                gender: '女'
            },
            {
                id: 3,
                name: '小美',
                age: 31,
                gender: '女'
            },
            {
                id: 4,
                name: '小刚',
                age: 21,
                gender: '男'
            },
            {
                id: 5,
                name: '小琪',
                age: 18,
                gender: '女'
            }
    
        ];
        // 拷贝数据
        function deepCopy(obj){
            var obj1 = Object.prototype.toString.call(obj) === '[object Array]'? [] : {} ;
            for (var key in obj){
                // 判断对象的值是否是自身的而不是原型链上的
                if (obj.hasOwnProperty(key)){
                    // 判断对象的值是否是引用数据类型
                    if (typeof obj[key] === 'object'){
                        obj1[key] = deepCopy(obj[key]);
                    } else {
                        obj1[key] = obj[key];
                    }
                }
            }
            return obj1;
        }
        // 记录默认的index值
        let ageIndex = 2;
        let genderIndex = 2;
    
        // 年龄数据
        var sortArr = [data=>JSON.parse(JSON.stringify(data)).sort( (a, b)=>a.age - b.age),
        data=>JSON.parse(JSON.stringify(data)).sort( (a, b)=>b.age - a.age),
        data=>data]


        // 性别数据
        var genderArr = [data=>data.filter(item =>item.gender === "男"),
        data=>data.filter(item =>item.gender === "女"),
        data=>data];

       console.log(sortArr);
       console.log(genderArr);

        // 根据数据渲染视图
        renderDom(data);
        function renderDom(data){
            // 获取dom元素
            var tableEl = document.querySelector('tbody');
            // 清空默认样式
            tableEl.innerHTML = '';
            // 根据数据循环创建元素渲染视图
            data.forEach(function(item,index){
                var trEl = document.createElement('tr')
                trEl.innerHTML = `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.gender}</td>
                        </tr>
                        `
                        tableEl.appendChild(trEl);
                    });
                   
        }
        var ageBtn = document.querySelectorAll('.age_sort a');
        var genderBtn = document.querySelectorAll('.gender_show a');

        // 年龄筛选渲染
        ageBtn.forEach(function(item,index){
            item.onclick = function(){
                ageBtn.forEach(function(item){
                    item.className = '';
                })
                this.className = 'active';

                ageIndex = index;
                var res = sortArr[index](data);  // 年龄排序的筛选
                var newres =  genderArr[genderIndex](res) // 在年龄数据的基础上做性别的筛选
                renderDom(newres);
            }
        })

        // 性别筛选渲染
        genderBtn.forEach(function(item,index){
            item.onclick = function(){
                genderBtn.forEach(function(item){
                    item.className = '';
                })
                this.className = 'active';

                genderIndex = index;
                var res = genderArr[index](data); // 性别筛选
                var newres = sortArr[ageIndex](res);  // 在性别筛选基础上 做一次年龄筛选
                //    console.log(res);
                renderDom(newres);
            }
        })
        
    </script>
</body>
